<template>
  <div style="height:100%;width: 100%;">
    <div v-if="chartsData && chartsData.displayStand && chartsData.displayStand.length > 0" class="fixedLeft">
      <div v-for="(item,index) in chartsData.displayStand" :key="index" class="flex" :class="index === 0 ? 'mt' : ''">
        <div :style="'background:'+item.color" />
        <div><span style="font-size: 10px">{{ item.label }} ({{ item.num }})个</span></div>
      </div>
    </div>
    <RelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-click="onNodeClick" :on-line-click="onLineClick" />
  </div>
</template>
<script>
import RelationGraph from 'relation-graph'
export default {
  name: 'Demo',
  components: { RelationGraph },
  props: {
    rootId: {
      type: String,
      require: true,
      default: 'force'
    },
    chartsData: {
      type: Object,
      default: function() {
        return {
          nodes: [],
          links: []
        }
      }
    }
  },
  data() {
    return {
      graphOptions: {
        allowSwitchLineShape: true,
        allowSwitchJunctionPoint: true,
        defaultJunctionPoint: 'border'
        // 这里可以参考"Graph 图谱"中的参数进行设置:http://relation-graph.com/#/docs/graph
      }
    }
  },
  watch: {
    rootId: function() {
      // this.showSeeksGraph()
    },
    chartsData: {
      handler(val) {
        if (val.nodes !== undefined && val.nodes !== null) {
          this.showSeeksGraph()
        }
      },
      deep: true
    }
  },
  mounted() {
    this.showSeeksGraph()
  },
  methods: {
    showSeeksGraph() {
      var __graph_json_data = {
        rootId: this.rootId,
        nodes: this.chartsData.nodes,
        links: this.chartsData.links
      }
      this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, () => {})
      this.$nextTick(() => {
        this.$refs.seeksRelationGraph.refresh()
      })
    },
    onNodeClick(nodeObject) {
      console.log('onNodeClick:', nodeObject)
    },
    onLineClick(lineObject) {
      console.log('onLineClick:', lineObject)
    }
  }
}
</script>

<style lang="scss" scoped>
.fixedLeft {
  position: fixed;
  bottom: 30px;
  box-shadow: #ccc 0 0 20px 2px;
  left: 220px;
  padding: 20px;
  box-sizing: border-box;
  z-index: 999;
  background: #fff;
}
/deep/.rel-map-canvas{
  width: 100%!important;
  height: 100%!important;
  // margin-left: unset!important;
  // margin-top: unset!important;
}
.flex {
  display: flex;
  align-items: center;
  margin-top: 5px;
}

.flex :nth-child(1) {
  width: 50px;
  height: 10px;
  margin-right: 3px;
}

.mt {
  margin-top: 0;
}

.xie {
  border: 1px solid #333;
  width: 200px;
  height: 20px;
  background: linear-gradient(to bottom right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 1px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 1px), rgba(0, 0, 0, 0) 100%);
}

.jk2 {
  width: 200px;
  height: 20px;
  background: linear-gradient(to top right, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 0) calc(50% - 1px), rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, 0) calc(50% + 1px), rgba(255, 0, 0, 0) 100%), linear-gradient(to bottom right, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 0) calc(50% - 1px), rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, 0) calc(50% + 1px), rgba(255, 0, 0, 0) 100%);
  border: 1px solid red;
}
</style>
